<template>
    <div>
        <p class="none" v-if="formData.length == 0">暂无数据</p>
        <div class="art flex" v-for="(item,index) in formData" :key="item.uid" v-else>
            <!-- 左边 -->
            <div class="left">
                <!-- 标题 -->
                <div class="title flex flex-y flex-between profile">
                    <!-- 头像 -->
                    <div class="flex flex-y">
                        <div class="pic">
                            <img :src="item.headImg?item.headImg:common.defaultImg" alt="头像">
                        </div>
                        <p class="name">{{item.accountName}}</p>
                    </div>
                    <!-- 时间 -->
                    <p class="none right10">{{filter_date(item.reviewDate)}}</p>
                </div>
                <!-- 主内容 -->
                <div class="content">
                    <cmsConvert :data="item.content"></cmsConvert>
                </div>
                <!-- 按钮组 -->
                <div class="btns flex flex-y">
                    <el-button
                        type="primary"
                        plain
                        size="small"
                        @click="handle(item,index)">下线</el-button>
                    <el-button
                        v-if="item.recommendFlag"
                        plain
                        size="small"
                        @click="recomment('off',item,index)">取消推荐</el-button>
                    <el-button
                        v-else
                        type="primary"
                        plain
                        size="small"
                        @click="recomment('up',item,index)">推荐</el-button>
                    <el-button
                        type="primary"
                        plain
                        size="small"
                        @click="getZan(item)">增加点赞数</el-button>
                </div>
            </div>
            <!-- 右边 -->
            <div class="right">
                <p class="none bottom10">图片</p>
                <div class="imgs flex flex-wrap">
                    <p class="none" v-if="item.pictures.length == 0">暂无数据</p>
                    <div
                        v-else
                        class="pic"
                        @click="url = child.imgUrl,ifShow = !ifShow"
                        v-for="child in item.pictures"
                        :key="child.imgUrl">
                        <img :src="child.imgUrl">
                    </div>
                </div>
            </div>
        </div>
        <!-- 分页 -->
        <page
            :total="pageTotal"
            @change="changePage"
            :sizes="pageSize"
            noSizes="total, prev, pager, next, jumper">
        </page>
        <!-- 图片预览 -->
        <cmsPreview :ifShow="ifShow" :url="url"></cmsPreview>
        <!-- 下线原因 -->
        <off
            :ifShow="ifOff"
            :formData="currentData"
            @httpSuccess="offSuccess"
            type="1">
            <!-- 1=动态,2=提问,3=文章,4=回答,5=评论 -->
        </off>
        <!-- 推荐至 -->
        <recommend
            :ifShow="ifRecommend"
            :formData="currentData"
            @httpSuccess="recommendSuccess"
            type="1">
            <!-- 1=动态,2=提问,3=文章,4=回答,5=评论 -->
        </recommend>
    </div>
</template>

<script>
import {formatDate} from '@/utils/formatDate.js'
import page from '@/components/public/Pagination'
import off from '@/components/content/off'
import recommend from '@/components/content/recommend'
export default {
    props:["search","date"],
    components:{
        page,
        off,
        recommend
    },
    data () {
        return {
            // 图片预览
            ifShow:false,
            url:"",

            //拒绝
            list_reason:[
                {
                    value:"包含敏感词",
                    label:"包含敏感词"
                },
                {
                    value:"文章涉嫌抄袭",
                    label:"文章涉嫌抄袭"
                },
                {
                    value:"文章被投诉",
                    label:"文章被投诉"
                }
            ],

            //文章列表
            allData:[],
            formData:[],

            //弹窗
            index:"",
            ifOff:false,
            currentData:"",
            ifRecommend:false,

            //分页
            pageTotal:"",
            pageNum: 1,
            pageSize:10, //后端写死了

            //other
            loading:true
        }
    },
    watch:{
        //搜索
        search(val){
            this.list();
        },
        //日期
        date(val){
            this.list();
        },
    },
    methods:{
        //列表
        list:function(){
            HTTP('msg_list', {
                searchParam:this.search,
            })
            .then(res=>{
                if(res.code == 200){
                    this.allData = res.data; //总数据，前端分页用到
                    console.log(this.allData);
                    this.pageTotal = res.data.length; //总数
                    this.formData = res.data.slice(0,this.pageSize); //取前3条
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
        //下线、上线
        handle:function(obj,n){
            this.index = n;
            this.currentData = obj;
            this.ifOff = !this.ifOff;
        },
        //下线成功的回调
        offSuccess:function(){
            console.log('下线成功的回调');
            this.formData.splice(this.index,1);
            this.pageTotal--;
        },
        //推荐
        recomment:function(type,obj,n){
            this.index = n;
            this.currentData = obj;
            //0:已推荐:1:未推荐
            //取消推荐
            if(type == 'off'){
                HTTP('robot_recommend', {
                    contentType:1,
                    uid:obj.uid,
                    status:'1'
                })
                .then(res=>{
                    if(res.code == 200){
                        this.common.msg('取消推荐成功');
                        this.$set(this.formData[n],'recommendFlag',0);
                    }
                    else{
                        this.common.msg(res.msg,'error');
                    }
                })
            }
            //推荐
            else{
                this.currentData = obj;
                this.ifRecommend = !this.ifRecommend;
            }
        },
        //推荐成功的回调
        recommendSuccess:function(){
            this.$set(this.formData[this.index],'recommendFlag',1);
        },
        //获取点赞数
        getZan:function(obj){
            HTTP('robot_getZan')
            .then(res=>{
                if(res.code == 200){
                    this.$confirm(`根据参数配置，本次将增加点赞数${res.data.approvals}，增加浏览量${res.data.browses}`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        this.addZan(obj);
                    })
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
        //增加点赞数
        addZan:function(obj){
            HTTP('robot_addZan', {
                uid:obj.uid,
                contentType:1
            })
            .then(res=>{
                if(res.code == 200){
                    this.common.msg('操作成功');
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
        //改变分页
        changePage:function(obj){
            this.pageNum = obj.pageNum; //当前页
            if(obj.pageNum == 1){
                this.formData = this.allData.slice(0,this.pageSize);
            }
            else{
                let left = this.pageSize*(this.pageNum-1);
                let right = left + this.pageSize;
                this.formData = this.allData.slice(left,right);
            }
        },
        //时间戳转时间
        filter_date:function(time){
            let date = new Date(time*1000);
            return formatDate(date,'yyyy-MM-dd hh:mm:ss');
        },
    },
    mounted(){
        this.list();
    }
}
</script>

<style lang="scss" scoped>
    //滚动条
    /deep/.el-scrollbar__wrap{
        overflow-x: hidden;
    }
    .art{
        width: 100%;
        border-bottom: 1px solid #DDDDDD;
        padding: 20px 20px 40px 20px;
        margin-bottom: 20px;
        .left{
            width: calc(100% - 370px);
            margin-right: 20px;
            position: relative;
            .header{
                max-width: 450px;
            }
            .tag{
                margin-left: 10px;
            }
            .profile{
                padding: 10px 0;
                .pic{
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    overflow: hidden;
                    img{
                        width: 100%;
                        min-height: 25px;
                    }
                }
                .name{
                    color: #999;
                    margin-left: 12px;
                    font-size: 14px;
                }
            }
            .content{
                width: 100%;
                min-height: 60px;
                padding: 10px 0 60px 0;
				word-break:break-all;
                // v-html的样式
                /deep/ img{
                    display: none;
                }
            }
            .btns{
                position: absolute;
                bottom: 0;
                left: 0;
            }
        }
        .right{
            width: 350px;
            .none{
                color: #666;
            }
            .imgs{
                .pic{
                    width: 100px;
                    height: 100px;
                    padding: 4px;
                    overflow: hidden;
                    cursor: pointer;
                    img{
                        width: 100%;
                        min-height: 100px;
                    }
                }
            }
        }
    }
</style>
